<template>
  <panel-head :route="route"/>
  <el-row style="background-color: white;padding: 15px 5px;">
    <el-col :span="5" :offset="19">
      <el-input v-model="input" style="width: 200px" placeholder="订单号" />
      <el-button type="primary" style="float: right;" @click="findOrder">查询</el-button>
    </el-col>
  </el-row>
  <el-table :data="orderData.list" style="width: 100%">
    <el-table-column prop="out_trade_no" label="订单号" fixed="left" width="140" />
    <el-table-column prop="hospital_name" label="就诊医院"  width="100"/>
    <el-table-column prop="service_name" label="陪诊服务"  width="100"/>
    <el-table-column prop="companion.avatar" label=" 陪护师">
      <template #default=scope>
        <el-avatar :size="50" :src="scope.row.companion.avatar" />
      </template>
    </el-table-column>
    <el-table-column prop="companion.mobile" label="陪护师手机号" />
    <el-table-column prop="price" label="总价" />
    <el-table-column prop="paidPrice" label="已付" />
    <el-table-column prop="order_start_time" label="下单时间">
      <template #default=scope>
        {{ dayjs(scope.row.order_start_time).format('YYYY-MM-DD')  }}
      </template>
    </el-table-column>
    <el-table-column prop="trade_state" label="订单状态">
      <template #default=scope>
        <el-tag type="primary" v-show="scope.row.trade_state!=='已取消'">{{ scope.row.trade_state }}</el-tag>
        <el-tag type="info" v-show="scope.row.trade_state==='已取消'">{{ scope.row.trade_state }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="service_state" label="接单状态" />
    <el-table-column prop="tel" label="联系人手机号" />
    <el-table-column label="操作" fixed="right"  width="100">
      <template #default=scope>
        <el-popconfirm
        :disabled="scope.row.trade_state!=='待服务'"
        class="box-item"
        title="确认执行此操作？"
        placement="bottom"
        @confirm="onComfirm(scope.row)">
        <template #reference>
          <el-button type="primary" link :disabled="scope.row.trade_state!=='待服务'">
            {{ scope.row.trade_state==='待服务'?'服务完成':'暂无服务' }}
          </el-button>
        </template>
      </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
   <!-- 分页 -->
 <div class="pagination-info">
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="paginationData.pageNum"
        :page-size="paginationData.pageSize"
        layout="total, prev, pager, next"
        :total="orderData.total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {ref,reactive, onMounted, toRaw}from 'vue'
import {useRoute} from 'vue-router'
import {adminOrder,updateOrder} from '../../../api'
import {ElMessage } from 'element-plus'
import dayjs from 'dayjs'

dayjs().format()
const route=useRoute()
const orderData=reactive({})
const input=ref('')

//分页数据
const paginationData=reactive({
  pageNum:1,
  pageSize:10
})
const getOrderDatd=(data=null)=>{
  if(data){
    adminOrder(data).then((data)=>{
      Object.assign(orderData,data.data)
    })
    return
  }
  adminOrder(paginationData).then((data)=>{
    Object.assign(orderData,data.data)
  })
}
onMounted(()=>{
  getOrderDatd()
  // console.log(orderData)
})
//确认修改服务状态
const onComfirm=(rowData)=>{
  updateOrder({'id':rowData.out_trade_no}).then((data)=>{
    if(data.code===10000){
      ElMessage.success('状态更改成功！')
    }
  })
  getOrderDatd()
}
//根据单号查询订单
const findOrder=()=>{
  const newParams={
    'out_trade_no':input.value
  }
  Object.assign(newParams,paginationData)
  // console.log(input.value)
  getOrderDatd(newParams)
}
//处理分页方法
const handleCurrentChange=(val)=>{
  paginationData.pageNum=val
  //请求账号列表
  getOrderDatd()
}
</script>
<style lang="less" scoped>
  
</style>